<template>
    <view class="step1-box step-box">
        <UNavbar title="人员管理" @leftClick="leftClick"> </UNavbar>
        <view class="tips">
            <view>温馨提示：</view>
            <view>人员照片请保持光线充足，无遮挡</view>
            <view>人员逐一进行酒测，酒测照片保持清晰</view>
            <view>登高人员作业前必须上传血压照片</view>
        </view>
        <up-table class="manb20">
            <up-tr>
                <up-th>岗位</up-th>
                <up-th>姓名</up-th>
                <!-- <up-th>电话</up-th> -->
                <up-th>酒测照片</up-th>
                <up-th v-if="data.haveHeight">血压照片</up-th>
            </up-tr>
            <up-tr v-for="item in data.emps">
                <up-td>{{ item.role }}</up-td>
                <up-td>{{ item.name }}</up-td>
                <!-- <up-td>{{ item.phone }}</up-td> -->
                <up-td
                    ><up-upload
                        :fileList="fileList1"
                        @afterRead="afterRead"
                        @delete="deletePic"
                        name="1"
                        :maxCount="1"
                    ></up-upload
                ></up-td>
                <up-td v-if="data.haveHeight"
                    ><up-upload
                        :fileList="fileList1"
                        @afterRead="afterRead"
                        @delete="deletePic"
                        name="1"
                        :maxCount="1"
                    ></up-upload
                ></up-td>
            </up-tr>
        </up-table>
        <up-line></up-line>
        <view class="item">
            <view class="label">是否存在登高作业</view>
            <up-radio-group
                placement="row"
                v-model="data.haveHeight"
                @change="groupChange"
            >
                <up-radio label="是" :name="true"> </up-radio>
                <up-radio label="否" :name="false"> </up-radio>
            </up-radio-group>
            <!-- <up-upload
                v-if="data.haveHeight"
                :fileList="fileList1"
                @afterRead="afterRead"
                @delete="deletePic"
                name="1"
                :maxCount="1"
            ></up-upload> -->
        </view>

        <TabStep @leftClick="onLeftClick" @rightClick="onRightClick"></TabStep>
    </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import TabStep from './TabStep.vue';
import UNavbar from '@/components/YNavbar/index.vue';

const fileList1 = ref([]);

const data = reactive({
    emps: [
        {
            role: '施工负责人',
            name: '王五',
            phone: '12345678901',
        },
        {
            role: '作业人员',
            name: '张三',
            phone: '12345678901',
        },
        {
            role: '作业人员',
            name: '李四',
            phone: '12345678901',
        },
        // {
        //     role: '作业',
        //     name: '李四',
        //     phone: '12345678901',
        // },
    ],
    haveHeight: false,
});

// 删除图片
const deletePic = (event) => {
    fileList1.value.splice(event.index, 1);
};
const temp = ref(null);
// 新增图片
const afterRead = async (event) => {
    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
    let lists = [].concat(event.file);
    let fileListLen = fileList1.value.length;
    temp.value = lists[0];
    lists.map((item) => {
        fileList1.value.push({
            ...item,
            status: 'uploading',
            message: '上传中',
        });
    });
    for (let i = 0; i < lists.length; i++) {
        // const result = await uploadFilePromise(lists[i].url);
        setTimeout(() => {
            let item = fileList1.value[fileListLen];
            fileList1.value.splice(fileListLen, 1, {
                ...item,
                status: 'success',
                message: '',
                // url: result,
            });
            fileListLen++;
        }, 1000);
    }
};

const uploadFilePromise = (url) => {
    return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
            url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
            filePath: url,
            name: 'file',
            formData: {
                user: 'test',
            },
            success: (res) => {
                setTimeout(() => {
                    resolve(res.data.data);
                }, 1000);
            },
        });
    });
};

const onLeftClick = () => {
    uni.navigateTo({
        url: '/pages/home/forms/step0',
    });
};
const onRightClick = () => {
    uni.navigateTo({
        url: '/pages/home/forms/step2',
    });
};
</script>

<style lang="scss">
.step1-box {
    .u-td {
        height: auto;
    }
    .item {
        .label {
            font-size: 14px;
        }
        padding: 20rpx;
    }
    .manb20 {
        .u-upload__button {
            margin: 0;
        }
    }
}
</style>
